<template>
  <el-dialog
    :visible="dialogVisible"
    :show-close="false"
    width="50%">
    <!--  主内容区域  -->
    <div v-for="(item, index) of bgList"
         v-show="showIndex == index"
         :key="item.id" class="bake-container">
      <div v-if="item.displayType == '1'" class="txt">{{item.caseContent}}</div>
      <img v-else-if="item.displayType == '2'" :src="item.fileUrl" class="img">
      <audio v-else-if="item.displayType == '3'" class="audio" controls :src="item.fileUrl"></audio>
      <video v-else-if="item.displayType == '4'" class="video" :src="item.fileUrl" controls>
        <track v-if="item.subtitlesEnUrl" :src="item.subtitlesEnUrl" srclang="en" label="English" kind="subtitles" default />
      </video>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="$emit('close')">关闭</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'background',
  props: {
    dialogVisible: { // 是否显示弹出框
      default: () => false,
      type: Boolean,
      required: true
    },
    bgList: {
      type: Array
    }
  },
  data () {
    return {
      /**
       * 显示那个bg的index，todo 这里还没写完，因为没看到效果
       */
      showIndex: 0
    }
  }
}
</script>

<style scoped lang="scss">
.bake-container{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .txt{
    font-size: 14px;
    line-height: 20px;
  }
  .img{
    width: 60%;
    height: auto;
  }
  .audio{
    width: 60%;
    height: auto;
  }
  .video{
    width: 60%;
    height: auto;
  }
}
</style>
